<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:h="http://java.sun.com/jsf/html" xmlns:f="http://java.sun.com/jsf/core"
    xmlns:ui="http://java.sun.com/jsf/facelets" xmlns:a4j="http://richfaces.org/a4j" xmlns:rich="http://richfaces.org/rich"
    xmlns:spring="http://www.springframework.org/tags">

<ui:composition template="/templates/main.xhtml">    
    <ui:define name="head">
    	<link href="#{facesContext.externalContext.requestContextPath}/resources/css/demo.css" rel="stylesheet" type="text/css" />
    
    	<script type="text/javascript" src="#{facesContext.externalContext.requestContextPath}/resources/js/chili-1.7.pack.js"></script>
    	<script type="text/javascript" src="#{facesContext.externalContext.requestContextPath}/resources/js/jquery.easing.js"></script>
    	<script type="text/javascript" src="#{facesContext.externalContext.requestContextPath}/resources/js/jquery.dimensions.js"></script>
    	<script type="text/javascript" src="#{facesContext.externalContext.requestContextPath}/resources/js/jquery.accordion.js"></script>
    	<script type="text/javascript">
    		jQuery(document).ready(function(){
    			jQuery('#list1a').accordion();
			});
    	</script>
    </ui:define>
    <ui:define name="body">

		<ul class="breadcrumb">
			<li><a href="#" class="breadcrumb-current">1: Select Customer</a></li>
			<li><a href="#">2: Add Products</a></li>
			<li><a href="#">3: Payment</a></li>
			<li><a href="#">4: Print Invoice</a></li>
		</ul>
        
        <div class="jquery-accordion" id="list1a">
			<a>There is one obvious advantage:</a>
			<div>
				<p>
					You've seen it coming!<br/>
					Buy now and get nothing for free!<br/>
					Well, at least no free beer. Perhaps a bear,<br/>
					if you can afford it.
				</p>
			</div>
			<a>Now that you've got...</a>
			<div>
				<p>
					your bear, you have to admit it!<br/>
					No, we aren't selling bears.
				</p>
			</div>
			<a>Rent one bear, ...</a>
			<div>
				<p>
					get two for three beer.
				</p>
				<p>
					And now, for something completely different.<br/>
					And now, for something completely different.<br/>
					And now, for something completely different.<br/>
					And now, for something completely different.<br/>
					And now, for something completely different.<br/>
					And now, for something completely different.<br/>
					And now, for something completely different.<br/>
					And now, for something completely different.<br/>
					Period.
				</p>
			</div>
		</div>
		
    </ui:define>
</ui:composition>    
    
</html>